<template>
  <div class="search_box">

    <div class="name_box">
      <div style="width: 100%">
        <lay-input
          v-model="searchMsg.projectName"
          class="w"
          size="xs"
          :allow-clear="true"
          placeholder="请输入工程名称"
        ></lay-input>

        <lay-input
          v-model="searchMsg.entrustmentNo"
          class="w"
          size="xs"
          :allow-clear="true"
          placeholder="请输入委托编号"
        ></lay-input>

        <lay-input
          v-model="searchMsg.sampleNo"
          class="w"
          size="xs"
          :allow-clear="true"
          placeholder="请输入样品编号"
        ></lay-input>

        <!--  报告状态,0待认领，1送审中，2待审核，3已审核，4已签发，5已归档 -->
        <lay-select
          v-model="searchMsg.status"
          class="w"
          :allow-clear="true"
          size="xs"
          placeholder="请选择状态"
          style="display: inline-block;"
        >
          <lay-select-option
            :value="0"
            label="待认领"
          ></lay-select-option>
          <lay-select-option
            :value="1"
            label="送审中"
          ></lay-select-option>
          <lay-select-option
            :value="2"
            label="待审核"
          ></lay-select-option>
          <lay-select-option
            :value="3"
            label="已审核"
          ></lay-select-option>
          <lay-select-option
            :value="4"
            label="已签发"
          ></lay-select-option>
          <lay-select-option
            :value="5"
            label="已归档"
          ></lay-select-option>
        </lay-select>

        <lay-date-picker
          style="display: inline-block;"
          v-model="time"
          range
          class="w"
          size="xs"
          :placeholder="['开始日期','结束日期']"
        ></lay-date-picker>
        <lay-button
          @click="submitClick"
          class="btn"
          type="primary"
          size="sm"
        >查询
        </lay-button>

        <lay-button
          @click="reactInput"
          type="primary"
          size="sm"
        >重置
        </lay-button>
      </div>

      <lay-button
        @click="exportXlsx"
        type="primary"
        size="sm"
        v-if="httpUrls.includes('/Checkmsg/GetProjectStaReport')"
      >导出报表
      </lay-button>
    </div>

  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, computed, toRefs, ref } from "vue";
import { layer } from "@layui/layer-vue";
export default defineComponent({
  props: ["tabs", "searchTime", "httpUrls"],
  setup(props, event) {
    const model = reactive({
      searchMsg: {
        projectName: "",
        testItems: "",
        entrustmentNo: "",
        sampleNo: "",
        reportNo: "",
        client: "",
        status: null,
        bt: null,
        et: null,
      } as any,
      time: [],
    });

    let dataTime = computed(() => {
      // 计算属性初始化加10
      return props.searchTime;
    });

    const submitClick = () => {
      model.searchMsg.bt = model.time[0];
      model.searchMsg.et = model.time[1];
      event.emit("search", model.searchMsg);
    };

    const reactInput = () => {
      for (let key in model.searchMsg) {
        model.searchMsg[key] = "";
      }
      model.searchMsg.bt = null;
      model.searchMsg.et = null;
      model.searchMsg.status = null;
      model.time = [];
      event.emit("search", model.searchMsg);
    };

    const exportXlsx = () => {
      event.emit("exportXlsx");
    };

    return {
      exportXlsx,
      reactInput,
      submitClick,
      dataTime,
      ...toRefs(model),
    };
  },
});
</script>

<style scoped>
.search_box {
  width: 100%;
  display: flex;
  align-items: center;
}
.lay-select {
  width: 20%;
}

.center {
  width: 200px;
}

.w {
  width: 200px;
  margin-left: 28px;
}

.lay-select {
  width: 200px;
}
.lay-row {
  width: 100%;
}
.btn {
  margin: 0 18px;
}

.name_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
</style>